//1.首页组件  作为index的二级组件
import React, { Component } from 'react'

//2.引入Cate 子组件
import IndexShop from '../Home/components/IndexShop/IndexShop'

//2.引入Banner 子组件
import Banner from '../Home/components/Banner/Banner'

//2.引入header头部组件
import Header from '.././../components/Header/Header'

//3.引入新人组件
import Pnew from './components/Pnew/Pnew'

//4.引入秒杀组件
import Miao from './components/Miao/Miao'

//4.引入万人团组件
import Group from './components/Group/Group'

//3.引入商品分类和轮播图请求接口
import { reqgetindexgoods, reqgetbanner, reqgetnew, reqgetseckill, reqgetgroupon } from '../../http/api'

export default class Home extends Component {
    constructor() {
        super()
        this.state = {
            //初始化数据
            //1.商品分类标题列表
            indexShop: [],
            //2.新人分类列表
            pnew: [],
            //3.轮播图列表
            banner: [],
            n: 0,
            arr: [

                { title: '商品精选', },
                { title: '商品推荐', },
                { title: '商品好物', },
                { title: '商品优惠', },

            ],
            //4.秒杀接口
            miao: [],
            //5.万人团接口
            group: []
        }
    }

    changeN(n) {
        console.log('aa');
        
        this.setState({
            n
        })
    }

    //一进来页面就发送请求
    componentDidMount() {
        //1.发送获取商品分类请求 渲染一级标题
        reqgetindexgoods().then(res => {
            this.setState({
                indexShop: res.data.list
            })
        })
        //2.获取轮播图列表
        reqgetbanner().then(res => {
            this.setState({
                banner: res.data.list
            })
        })
        //3.请求新人列表
        reqgetnew().then(res => {
            this.setState({
                pnew: res.data.list
            })
        })

        reqgetseckill().then(res => {
            this.setState({
                miao: res.data.list
            })
        })

        reqgetgroupon().then(res => {
            this.setState({
                group: res.data.list
            })
        })
    }

    render() {
        let { indexShop, banner, pnew, arr, n, miao, group } = this.state
        return (
            <div className='home app'>

                <Header title='商品主页'></Header>

                {/* 2.首页商品列表子组件 */}
                <IndexShop indexShop={indexShop} arr={arr} n={n} changeN={(n) => { this.changeN(n) }}></IndexShop>
                {/* 1.新人专享列表 */}
                <Pnew pnew={pnew}></Pnew>
                {/* 3.轮播图子组件 */}
                <Banner banner={banner}></Banner>
                {/* 4.秒杀组件 */}
                <Miao miao={miao}></Miao>
                {/* 5.万人团组件 */}
                <Group group={group}></Group>
            </div>
        )
    }
}
